<template>
    <view class="joint-list">
        <view class="item" v-for="index in 10" :key="index">
            <view class="head">
                <view class="tag">实时</view>
                <view class="title">活动地点颐高上海街剧本杀，活动时间每天下午7点，6人局想玩的朋友可以加入</view>
            </view>
            <view class="stat-list">
                <view class="stat-item">
                    <image class="icon" src="/static/index/type.svg" />
                    <view class="text">剧本杀(5/6)</view>
                </view>
                <view class="stat-item">
                    <image class="icon" src="/static/index/pay.svg" />
                    <view class="text">AA付款</view>
                </view>
                <view class="stat-item">
                    <image class="icon" src="/static/index/city.svg" />
                    <view class="text">2公里</view>
                </view>
            </view>
            <view class="hr"></view>
            <view class="foot">
                <view class="users">
                    <image src="/static/1.png" mode="" v-for="i in 5" :key="i" />
                </view>
                <view class="btn">加入</view>
            </view>
        </view>
    </view>
</template>
<script setup>
defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
</script>
<style lang="scss" scoped>
.joint-list {
    .item {
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 28rpx 24rpx 22rpx 24rpx;
        margin-bottom: 20rpx;

        .head {

            .tag {
                height: 36rpx;
                background: #2DC362;
                border-radius: 6rpx 6rpx 6rpx 6rpx;
                padding: 0 10rpx;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 36rpx;
                display: inline-block;
                margin-right: 4rpx;
            }

            .title {
                display: inline;
                font-size: 30rpx;
                color: #161723;
                line-height: 44rpx;
            }
        }

        .stat-list {
            display: flex;
            align-items: center;
            margin-top: 14rpx;
            gap: 0 40rpx;

            .stat-item {
                display: flex;
                align-items: center;

                .icon {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 12rpx;
                }

                .text {
                    font-size: 26rpx;
                    color: #303133;
                    line-height: 40rpx;
                }
            }
        }

        .hr {
            width: 100%;
            height: 1rpx;
            background: #EBEEF5;
            margin: 24rpx 0 16rpx 0;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .users {
                display: flex;
                align-items: center;

                image {
                    width: 64rpx;
                    height: 64rpx;
                    border-radius: 50%;
                    border: 4rpx solid #FFFFFF;
                }

                image+image {
                    margin-left: -20rpx;
                }
            }

            .btn {
                width: 140rpx;
                height: 56rpx;
                background: #E10509;
                border-radius: 200rpx 200rpx 200rpx 200rpx;
                font-size: 28rpx;
                color: #FFFFFF;
                line-height: 56rpx;
                text-align: center;
            }
        }
    }
}
</style>